<template>
  <div class="father">
    <h1>我是父组件</h1>
    <suspense>
<!--      作用 当子组件未加载出来的时候(异步加载) 将fallback插槽展示 -->
      <template v-slot:default>
        <son></son>
      </template>
      <template v-slot:fallback>
        <h1>请稍等，马上加载出来.....</h1>
      </template>
    </suspense>
  </div>
</template>

<script>
// 引入异步导入组件
import {defineAsyncComponent} from "vue";
const son = defineAsyncComponent( () => import('./components/son.vue'))
export default {
  name: 'App',
  components:{
    son
  },

}
</script>

<style>
  .father{
    background-color: forestgreen;
  }
</style>
